<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: lalahahababa
 * @LastEditTime: 2022-01-07 16:57:51
-->
<template>
 
  <div ref="right1_container" style="height: 95%"></div>
  
</template>

<script>
import { DualAxes } from '@antv/g2plot';

export default {
      data(){
        return{
         dataArr:[{ year: '1991', value: 3, count: 10 },
  { year: '1992', value: 4, count: 4 },
  { year: '1993', value: 3.5, count: 5 },
  { year: '1994', value: 5, count: 5 },
  { year: '1995', value: 4.9, count: 4.9 },
  { year: '1996', value: 6, count: 35 },]
        }
    },
    created(){


    },
    mounted(){
      this.initChart()

      },
      methods:{
        initChart() {
          const dualAxes =new DualAxes(this.$refs.right1_container, {
            data:[this.dataArr,this.dataArr],
             xField: 'year',
             yField: ['value','count'],
             geometryOptions: [
    {
      geometry: 'line',
      color: '#5B8FF9',
    },
    {
      geometry: 'line',
      color: '#5AD8A6',
    },
  ],
          });
          dualAxes.render();

        }

      }
}

</script>


<style scoped>

</style>